<template>
  <el-menu
    default-active="1"
    class="el-menu-vertical-demo"
    router
    :style="{height: mainHeight}"
    background-color="#545c64"
    text-color="#fff"
    active-text-color="#ffd04b">
    <el-menu-item index="/">
      <i class="el-icon-menu"></i>
      <span slot="title">工作台</span>
    </el-menu-item>
    <el-submenu index="2">
      <template slot="title">
        <i class="el-icon-location"></i>
        <span>学生管理</span>
      </template>
      <el-menu-item index="/student">学生管理</el-menu-item>
      <el-menu-item index="2-2">学生考勤</el-menu-item>
      <el-menu-item index="2-3">学生成绩</el-menu-item>
      <el-menu-item index="2-4">异动管理</el-menu-item>
    </el-submenu>
    <el-menu-item index="/class">
      <i class="el-icon-menu"></i>
      <span slot="title">班级管理</span>
    </el-menu-item>
    <el-menu-item index="4">
      <i class="el-icon-document"></i>
      <span slot="title">教师管理</span>
    </el-menu-item>
    <el-submenu index="5">
      <template slot="title">
        <i class="el-icon-location"></i>
        <span>财务管理</span>
      </template>
      <el-menu-item index="5-1">缴费管理</el-menu-item>
      <el-menu-item index="5-2">银行卡管理</el-menu-item>
      <el-menu-item index="5-2">收款微信管理</el-menu-item>
      <el-menu-item index="5-2">收款支付宝管理</el-menu-item>
      <el-menu-item index="5-2">缴费流水报表</el-menu-item>
    </el-submenu>
    <el-submenu index="6">
      <template slot="title">
        <i class="el-icon-location"></i>
        <span>权限管理</span>
      </template>
      <el-menu-item index="/role">角色管理</el-menu-item>
      <el-menu-item index="6-2">权限管理</el-menu-item>
    </el-submenu>
    <el-submenu index="7">
      <template slot="title">
        <i class="el-icon-location"></i>
        <span>设置</span>
      </template>
      <el-menu-item index="/setting">网站设置</el-menu-item>
      <el-menu-item index="8-2">操作日志</el-menu-item>
      <el-menu-item index="/about">关于</el-menu-item>
    </el-submenu>
  </el-menu>
</template>

<script>
export default {
  name: 'SysMenu',
  data() {
    return {
      mainHeight: 200
    }
  },
  created() {
    this.mainHeight = window.innerHeight - 60 + 'px'
  }
}
</script>